<template>
  <div class="box">
    <div class="condition">
      <div>传感器类型</div>
      <div>
        <el-select v-model="Cgq" placeholder="请选择传感器类型">
          <el-option v-for="item in CgqList" :key="item.ID" :label="item.SensortypeType" :value="item.SensortypeType">
          </el-option>
        </el-select>
      </div>
      <div>请选择斜井类型</div>
      <div>
        <el-select v-model="Gzm" placeholder="请选择斜井类型" @change="sc">
          <el-option v-for="item in GzmList" :key="item.ID" :label="item.gzmname" :value="item.gzmname">
          </el-option>
        </el-select>
      </div>

      <div v-if="false">上下顺槽</div>
      <div v-if="false">
        <el-select v-model="scItem" placeholder="请选择上下顺槽">
          <el-option v-for="item in scList" :key="item.ID" :label="item.XS" :value="item.XS">
          </el-option>
        </el-select>
      </div>

      <div><el-button type="warning" @click="Query">查询</el-button></div>
      <!-- <div><el-button type="success" plain>重置</el-button></div> -->
    </div>
    <div class="EcharsS">
      <div id="chartOne" style="width: 100%; height: 360px"></div>
      <div id="chartTwo" style="width: 100%; height: 360px"></div>
    </div>
  </div>
</template>

<script>
import {
  dingbanshebeichuanganqipeizhilist,
  dingbanpeizhigongzuomianlist,
  dingbanshishixinxicha1,
  HuoQuAnZhuangJiDian
} from "../../https/api/user";
import * as echarts from "echarts";
export default {
  data() {
    return {
      Cgq: "",
      CgqList: [],
      Gzm: "",
      GzmList: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      biaoti: [],
      scItem: "",
      scList: [

      ],
      initEchartsList: [],
      Realzhts: []
    };
  },
  mounted() {
    this.initChartOne();
    this.initChartTwo();
    this.ChuanGanQiLeiXingList();
    this.GongZuoMianName();
  },
  methods: {
    async sc() {
      const data = {
        gzmname: this.Gzm
      }
      const res = await HuoQuAnZhuangJiDian(data)
      this.scList = res
    },
    Query() {
      const data = {
        SRTDT_SensorStyle: this.Cgq,
        SIIT_MiningFace: this.Gzm,
        // location: this.scItem
      };
      dingbanshishixinxicha1(data).then((res) => {
        console.log("实时数据柱状图and折线图", res);
        if (res) {
          this.initEchartsList = res[0]
          this.Realzhts = res[0].Realzhts
        }
        this.initChartOne();
        this.initChartTwo();
      });
    },
    GongZuoMianName() {
      dingbanpeizhigongzuomianlist().then((res) => {
        console.log("斜井类型", res);
        this.GzmList = res;
      });
    },
    ChuanGanQiLeiXingList() {
      dingbanshebeichuanganqipeizhilist().then((res) => {
        console.log("传感器类型列表", res);
        this.CgqList = res;
      });
    },
    initChartOne() {
      const chart = echarts.init(document.getElementById("chartOne"));

      var option = {
        legend: {
          textStyle: {
            color: 'white' // 设置图例文字的颜色为红色
          }
        },

        grid: {
          top: 35,
          left: 70,
          right: 70,
          bottom: 25,
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(145, 145, 145, 0.3)",
            },
          },
        },
        xAxis: {
          name: "",
          type: "category",
          scale: true,
          axisLine: {
            symbol: ['none', 'arrow'], // 第一个值是 X 轴起始处的箭头，第二个值是结束处的箭头，'none' 表示不显示
            symbolSize: 10,// 箭头大小
            lineStyle: {
              color: "rgb(46,102,165)",
              onZero: false,
            },

          },
          axisLabel: {
            rotate: 0, // 旋转角度
            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
          },

          data: this.initEchartsList.location
        },

        yAxis: {
          show: true,
          name: this.initEchartsList.units,
          type: "value",
          splitNumber: 5, // 设置y轴刻度间隔个数
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            lineStyle: {
              color: "rgb(46,102,165)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#87CEFA",

            },
          },
        },
        dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            // start: 0, //初始化时，滑动条宽度开始标度
            end: 6, //初始化时，滑动条宽度结束标度
          },
        ],
        series: this.Realzhts.map((item, index) => {
          return {
            name: item.name,
            type: 'bar',
            barWidth: '10%', // 设置柱子宽度为类目宽度的50
            data: item.data,
            markLine: {
              data: [
                {
                  name: '报警线',
                  yAxis: this.initEchartsList.BaoBing,
                  lineStyle: {
                    type: 'solid',
                    width: 2,
                    color: '#FF0000' // 红色报警线
                  }
                },
                // 预警线
                {
                  name: '预警线',
                  yAxis: this.initEchartsList.YuJing,
                  lineStyle: {
                    type: 'solid',
                    width: 2,
                    color: '#FFFF00' // 黄色预警线
                  }
                }
              ]
            }
          }
        })


      };

      // 使用配置项显示图表
      chart.setOption(option);

    },
    initChartTwo() {
      var option = {
        legend: {
          textStyle: {
            color: 'white' // 设置图例文字的颜色为红色
          }
        },

        grid: {
          top: 35,
          left: 70,
          right: 70,
          bottom: 25,
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(145, 145, 145, 0.3)",
            },
          },
        },
        xAxis: {
          name: "",
          type: "category",
          // scale: true,
          axisLine: {
            symbol: ['none', 'arrow'], // 第一个值是 X 轴起始处的箭头，第二个值是结束处的箭头，'none' 表示不显示
            symbolSize: 10,// 箭头大小
            lineStyle: {
              color: "rgb(46,102,165)",
              onZero: false,
            },

          },
          axisLabel: {
            rotate: 0, // 旋转角度
            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
          },
          // boundaryGap: true,
          data: this.initEchartsList.location
        },

        yAxis: {
          show: true,
          name: this.initEchartsList.units,
          type: "value",
          splitNumber: 5, // 设置y轴刻度间隔个数
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            lineStyle: {
              color: "rgb(46,102,165)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#87CEFA",

            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            start: 0,
            end: 6, //初始化时，滑动条宽度结束标度
          },
        ],
        series: this.Realzhts.map((item, index) => {
          return {
            name: item.name,
            type: 'line',

            data: item.data,
            markLine: {
              data: [
                {
                  name: '报警线',
                  yAxis: this.initEchartsList.BaoBing,
                  lineStyle: {
                    type: 'solid',
                    width: 2,
                    color: '#FF0000' // 红色报警线
                  }
                },
                // 预警线
                {
                  name: '预警线',
                  yAxis: this.initEchartsList.YuJing,
                  lineStyle: {
                    type: 'solid',
                    width: 2,
                    color: '#FFFF00' // 黄色预警线
                  }
                }
              ]
            }
          }
        })


      };
      const myChart = echarts.init(document.getElementById("chartTwo"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding: 0 20px;

  // background-color: rgb(28,43,81);
  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(2) {
      margin-left: 7px;

      .el-select {
        /deep/.el-input__inner {
          background-color: rgb(14, 26, 55);
          color: #fff;
          border: 1px solid rgb(40, 103, 185);
        }
      }

      .el-select-dropdown__item {
        font-size: 7px;
        line-height: 19px;
        color: #fff;
        font-weight: 200;
        background-color: #003e00;
      }
    }

    >div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(4) {
      margin-left: 7px;

      .el-select {
        /deep/.el-input__inner {
          background-color: rgb(14, 26, 55);
          color: #fff;
          border: 1px solid rgb(40, 103, 185);
        }
      }

      .el-select-dropdown__item {
        font-size: 7px;
        line-height: 19px;
        color: #fff;
        font-weight: 200;
        background-color: #003e00;
      }
    }

    >div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(6) {
      margin-left: 7px;

      .el-select {
        /deep/.el-input__inner {
          background-color: rgb(14, 26, 55);
          color: #fff;
          border: 1px solid rgb(40, 103, 185);
        }
      }

      .el-select-dropdown__item {
        font-size: 7px;
        line-height: 19px;
        color: #fff;
        font-weight: 200;
        background-color: #003e00;
      }
    }

    >div:nth-child(7) {
      margin-left: 7px;
    }

  }

  .EcharsS {
    width: 100%;
    height: 750px;

    >div:nth-child(2) {
      margin-top: 20px;
    }

    // border: 1px solid red;
  }
}
</style>